<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heardTitle">
			<text>修改密码</text>
		</view>
		<view class="main">
			<view class="mainInput">
				<view class="caseInput-code">
					<text class="codeBtn">原密码</text>
					<input type="password" v-model="formData.oldPassWd" class="inp-code" placeholder="请输入原密码"
						placeholder-class="title_input" />
				</view>
				<view class="caseInput-code2">
					<text class="codeBtn2">新密码</text>
					<input type="password" v-model="formData.newPassWd" class="inp-code2" placeholder="请输入密码"
						placeholder-class="title_input" />
				</view>
				<view class="caseInput-code2">
					<text class="codeBtn2">新密码确认</text>
					<input type="password" v-model="formData.confirmPassWd" class="inp-code2" placeholder="请再次确认密码"
						placeholder-class="title_input" />
				</view>
			</view>
			<view class="mainInfo">
				<text>密码可由数字和字母组合，不可使用特殊符号，密码长度为6-12位。</text>
			</view>
			<!-- <view class="mainTips">
				<text>原密码输入错误!</text>
			</view> -->
		</view>
		<view class="footCase">
			<view class="footInfo" @click="go(1)">
				<text class="footInfo1">忘记原密码</text>
			</view>
			<view class="footBtn" @click="SubmitEvent(2)">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import { updatePasswd } from './api/index.js';
	export default {
		data() {
			return {
				csdeState: false,
				phoneNum: '',
				formData:{
				},
				mima: '',
			}
		},
		methods: {
			SubmitEvent(){
			//接口后期打开
			updatePasswd(this.formData).then(response => {
			  console.log(response)
			  if (response.code === 0) {
				  uni.showToast({
				      title: '修改成功',
				      icon: 'success',
				      duration: 2000,
				      complete: () => {
						uni.switchTab({
							url: '/src/views/pageMain/pageLogin/index'
						});
				      }
				    });
					setTimeout(function() {
						uni.navigateBack({
						    delta: 1  // 返回的页面数，如果 delta 大于现有页面数，则返回到首页
						});
					}, 1000);
			  }else{
				 uni.$u.toast(response.msg) 
			  }
			 })
			},
			go(e) {
				switch (e){
					case 1:
						uni.navigateTo({
							url: '/src/views/pageMine/xiugaimima/wangjimima/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 2:
						uni.switchTab({
							url: '/src/views/pageMain/pageMine/index'
						});
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";

	.container {
		position: relative;
		background-color: #F0F0F0;
		height: 100vh;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.heardTitle{
		width: 650rpx;
		height: 100rpx;
		background: #FFB607;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -30%;
		text-align: center;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 60rpx;
	}
	.main {
		width: 650rpx;
		height: 454rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-top: -40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.mainInput {
		margin-top: 20rpx;
	}
	
	.caseInput-code {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		border: 1px solid #B3B3B3;
		display: flex;
		align-items: center;
	}

	.inp-code {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #CCCCCC;
		line-height: 44rpx;
	}

	.codeBtn {
		width: 260rpx;
		height: 56rpx;
		background: #B3B3B3;
		border-radius: 28rpx;
		text-align: center;
		
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 56rpx;
	}
	
	.caseInput-code2 {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		border: 1px solid #FFB607;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.inp-code2 {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #CCCCCC;
		line-height: 44rpx;
	}
	
	.codeBtn2 {
		width: 260rpx;
		height: 56rpx;
		background: #FFB607;
		border-radius: 28rpx;
		text-align: center;
		
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 56rpx;
	}
	
	::v-deep.title_input {
		color: #CCCCCC;
	}
	.mainInfo{
		font-weight: 400;
		font-size: 18rpx;
		color: #808080;
		line-height: 30rpx;
		margin-top: 30rpx;
	}
	.mainTips{
		width: 180rpx;
		height: 36rpx;
		background: #F2F2F2;
		border-radius: 18rpx;
		text-align: center;
		
		font-weight: 400;
		font-size: 20rpx;
		color: #FF8106;
		line-height: 36rpx;
		margin-top: 5%;
	}
	.footCase {
		margin-top: 40%;
	}

	.footInfo {
		text-align: center;
		margin-bottom: 10rpx;
	}
	.footInfo1{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF8106;
		line-height: 30rpx;
	}
	.footBtn {
		width: 650rpx;
		height: 80rpx;
		background: #FF8106;
		border-radius: 27rpx;
		text-align: center;
		
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>